import { deepClone } from '@/utils'
import NP from 'number-precision';
import { getPageConfigRequest } from '@/api/cloudAnalysis'
import { searchCloudToolSourceConfigRequest } from '@/api/tools'
export default {
    data() {
        return {
            //修改页面配置
            step: 1,                            //步骤条步数
            activeName: 'specification',    //编辑的tabs
            menuForm: {
                type: 3,                        //页面类型
                text: '',                       //文本  
                tableName: null,                 //表格名字
                tableList: [],                  //表格
                legendConfig: [],               //图表调整
                analysisConfig: [],             //分析设置
                scriptCommand: null,            //脚本执行命令
                downloadItem: [],               //下载格式选择
                valid: [],                      //code校验
                chartForm: {},                   //绘图from
                analysisForm: {},                //分析from
            },
            //编辑组件信息
            componentInfo: {
                //组件名称
                title: '',
                //组件编码
                code: '',
                //组件编码
                code2: '',
                //组件编码
                code3: '',
                //组件编码
                code4: '',
                //组件提示语
                tooltip: '',
                //组件默认值
                default: '',
                //组件默认值
                default2: '',
                //组件默认值
                default3: 1,
                //组件默认值
                default4: 1,
                //组件类型
                type: '',
                //组件label
                label: '',
                //组件value
                value: '',
                //组件标记范围
                radius: '',
                //组件提示文本
                tooltip: '',
                //组件滑动步长
                step: '',
                //取值上限
                max: '',
                //左侧文本
                left: '',
                //右侧文本
                right: '',
            },
            getConfigApi: null,
        };
    },
    methods: {
        async init(row) {
            this.getConfigApi = this.$router.history.current.name === 'editMenu' ? searchCloudToolSourceConfigRequest : getPageConfigRequest
            this.step = 0
            this.activeName = 'specification'
            let pageCode = row.pageCode
            const res = await this.getConfigApi({ pageCode })
            if (res.code === 200) {
                this.menuForm = res.data
                this.pictureList = this.menuForm.description
                this.Instructions = this.pictureList[0].url
                this.pictureList2 = this.menuForm.specification
                this.specification = this.pictureList2[0].url
                this.scriptList = this.menuForm.scriptFileList
            } else {
                this.menuForm = {
                    type: 3,                        //页面类型
                    text: '',                       //文本
                    tableName: null,                 //表格名字
                    tableList: [],                  //表格
                    legendConfig: [],               //图表调整
                    analysisConfig: [
                        {
                            id: 'data',
                            code: 'data',
                            default: 'tabulation',
                            default2: 'singleFile',
                            title: '数据文件',
                            type: 'file'
                        }
                    ],             //分析设置
                    scriptCommand: null,            //脚本执行命令
                    downloadItem: [],               //下载格式选择
                    valid: ['data', 'genome'],                       //code校验
                    chartForm: {},                   //绘图from
                    analysisForm: {
                        'dataFileId#': '',
                        'dataFileName#': ''
                    },                //分析from
                }
                this.scriptList = []
                this.pictureList = []
                this.Instructions = null
                this.pictureList2 = []
                this.specification = null
            }
            localStorage.setItem('valid', JSON.stringify(this.menuForm.valid || []))
        },
        //添加文本信息
        addText() {
            this.menuForm.text = this.editorText
            this.editorText = ''
        },
        //编辑文本
        editText() {
            this.editorText = this.menuForm.text
            this.menuForm.text = ''
        },
        //保存菜单信息
        saveMenuConfig() {
            let valid = JSON.parse(localStorage.getItem('valid')) || []
            this.menuForm.valid = valid
            this.$emit('saveMenu', this.menuForm);
        },
        //删除表格列
        deleteTableItem(id) {
            const index = this.menuForm.tableList.findIndex(i => i.id === id)
            this.menuForm.tableList.splice(index, 1)
        },
        //确认添加表格列
        tableInfoConfirm() {
            const id = new Date().getTime()
            if (this.menuForm.tableList.find(i => i.prop === this.tableInfo.prop)) return this.$message.error('编码重复！')
            this.menuForm.tableList.push({
                ...this.tableInfo,
                id
            })
            this.tableInfoCancel()
        },
        //打开添加组件dialog
        addComponent(type) {
            const list = ['select', 'color', 'input', 'slider', 'check', 'radio', 'switch', 'colorMultiple', 'defaultTitle', 'defaultSize', 'defaultSize2', 'defaultColor', 'doubleColor', 'defaultAngle', 'text', 'defaultRadio', 'defaultSelect', 'abundance', 'mutualExclusion','iconSelector']
            if (list.includes(type) && this.activeName === 'chart' && !this.collapseName) return this.$message.error('请先添加调整设置或者选中已添加设置！')
            const list2 = ['doubleColor', 'defaultColor', 'color']
            if (list2.includes(type)) {
                this.componentInfo.default = '#000000'
                this.componentInfo.default2 = '#000000'
            }
            const list3 = ['Xgroup', 'Ygroup']
            if (list3.includes(type)) {
                this.componentInfo.default = []
            }
            if (type === 'mutualExclusion') {
                this.componentInfo.default = [{ value: 0 }, { value: 1 }]
            }
            if (type === 'iconSelector') {
                this.componentInfo.default = ''
                // this.componentInfo.data = ''
            }
            if (type === 'file') {
                this.componentInfo.default = 'tabulation'
                this.componentInfo.default2 = 'singleFile'
            }
            if (type === 'colorMultiple') {
                this.componentInfo.default = 'Science'
                this.changeReplace('Science')
            }
            this.componentInfo.type = type
            this.addOrEdit = 'add'
            this.componentInfo.title = this.componentType(type)
            this.componentVisible = true
        },
        //编辑组件collapse
        editComponent(data) {
            this.addOrEdit = 'edit'
            this.editId = data.id
            if (data.type === 'colorMultiple') {
                this.changeReplace(data.default)
            }
            this.componentInfo = deepClone(data)
            this.componentVisible = true
        },
        //删除组件collapse
        delComponent(id) {
            this.$confirm('此操作将删除该设置, 是否继续', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        const index = this.menuForm.legendConfig.findIndex(i => i.id === id)
                        const config = this.menuForm.legendConfig.find(i => i.id === id).config
                        const codeList = config.reduce((pre, item, index) => {
                            if (item.code) pre.push(item.code)
                            if (item.code2) pre.push(item.code2)
                            if (item.code3) pre.push(item.code3)
                            if (item.code4) pre.push(item.code4)
                            return pre
                        }, [])
                        const valid = JSON.parse(localStorage.getItem('valid') || "[]")
                        codeList.forEach(a => {
                            delete this.menuForm.chartForm[a]
                            let index = valid.findIndex(i => i === a)
                            valid.splice(index, 1)
                        })
                        localStorage.setItem('valid', JSON.stringify(valid))
                        this.menuForm.legendConfig.splice(index, 1)
                        this.collapseName = ''
                    } else if (action === 'cancel') {
                        this.$message({
                            message: '取消操作',
                        })
                    }
                    done();
                }
            }).catch(() => { })
        },
        //删除组件
        delComItem(data, id) {
            let form = this.activeName === 'chart' ? this.menuForm.chartForm : this.menuForm.analysisForm
            let valid = JSON.parse(localStorage.getItem('valid') || "[]")
            const index = data.findIndex(i => i.id === id)
            let code = data.find(i => i.id === id).code
            let code2 = data.find(i => i.id === id).code2
            let code3 = data.find(i => i.id === id).code3
            let code4 = data.find(i => i.id === id).code4
            if (code) delete form[code]
            if (code) delete form[code + 'Xgroup#']
            if (code) delete form[code + 'Ygroup#']
            if (code) delete form[code + 'circleItemList#']
            if (code) delete form[code + 'colorList#']
            if (code) delete form[code + 'mutualExclusion#']
            if (code2) delete form[code2]
            if (code3) delete form[code3]
            if (code4) delete form[code4]
            const y = valid.findIndex(i => i === code)
            const y2 = valid.findIndex(i => i === code2)
            const y3 = valid.findIndex(i => i === code3)
            const y4 = valid.findIndex(i => i === code4)
            valid.splice(y, 1)
            if (y2 !== -1) {
                valid.splice(y2, 1)
            }
            if (y3 !== -1) {
                valid.splice(y3, 1)
            }
            if (y4 !== -1) {
                valid.splice(y4, 1)
            }
            data.splice(index, 1)
            localStorage.setItem('valid', JSON.stringify(valid))
        },
        componentType(type) {
            const title = {
                'basic': '',
                'main': '主标题设置',
                'Xaxis': 'X轴设置',
                'Yaxis': 'Y轴设置',
                'legend': '图例设置',
                'select': '',
                'color': '',
                'input': '',
                'slider': '',
                'check': '',
                'radio': '',
                'switch': '',
                'colorMultiple': '',
                'defaultTitle': '标题',
                'defaultSize': '字体',
                'defaultSize2': '字体',
                'defaultColor': '颜色',
                'doubleColor': '',
                'defaultAngle': '旋转角度',
                'text': '',
                'defaultRadio': '',
                'defaultSelect': '',
                'abundance': '丰度取值',
                'mutualExclusion': '',
                'Xgroup': 'X轴分组',
                'Ygroup': 'Y轴分组',
                'circleItem': '圈图设置'
            }
            return title[type]
        },
        //确定添加组件
        ComponentConfirm() {
            this.$refs['componentForm'].validate((validate) => {
                if (!validate) return
                const list = ['basic', 'main', 'Xaxis', 'Yaxis', 'legend']
                const list2 = ['select', 'color', 'input', 'slider', 'check', 'radio', 'switch', 'colorMultiple', 'defaultTitle', 'defaultSize', 'defaultSize2', 'defaultColor', 'doubleColor', 'defaultAngle', 'text', 'defaultRadio', 'defaultSelect', 'abundance', 'mutualExclusion', 'Xgroup', 'Ygroup', 'file', 'circleItem','iconSelector']
                //新增设置
                if (list.includes(this.componentInfo.type)) {
                    if (this.addOrEdit === 'add') {
                        this.addOfCollapse(this.componentInfo.type)
                    } else {
                        this.editOfCollapse(this.componentInfo.type, this.editId)
                    }
                    //新增组件
                } else if (list2.includes(this.componentInfo.type)) {
                    let config
                    if (this.activeName === 'chart') {
                        config = this.menuForm.legendConfig.find(i => i.id === this.collapseName).config
                    } else if (this.activeName === 'Analysis') {
                        config = this.menuForm.analysisConfig
                    }
                    if (this.addOrEdit === 'add') {
                        this.addOfComInfo(config, this.componentInfo.type)
                    } else {
                        this.editOfComInfo(config, this.editId, this.componentInfo.type)
                    }
                }
            })
        },
        //根据组件类型添加内容
        addOfCollapse(type) {
            let id = new Date().getTime()
            if (type === 'basic') {
                this.menuForm.legendConfig.push({
                    id,
                    config: [],
                    ...this.componentInfo
                })
            } else if (type === 'main') {
                let valid = JSON.parse(localStorage.getItem('valid') || "[]")
                this.menuForm.legendConfig.push({
                    id,
                    config: [
                        {
                            id: id + 1,
                            code: 'title' + id,
                            type: 'defaultTitle',
                            title: '标题'
                        },
                        {
                            id: id + 2,
                            code: 'font' + id,
                            code2: 'font_size' + id,
                            code3: 'font_weight' + id,
                            code4: 'font_italic' + id,
                            type: 'defaultSize',
                            title: '字体',
                            default: 'TIMES',
                            default2: 11,
                            default3: 0,
                            default4: 0,
                        },
                        {
                            id: id + 3,
                            code: 'font_color' + id,
                            type: 'defaultColor',
                            title: '颜色',
                            default: '#000000',
                        }
                    ],
                    ...this.componentInfo
                })
                valid.push('title' + id)
                this.menuForm.chartForm['title' + id] = ''
                valid.push('font' + id)
                this.menuForm.chartForm['font' + id] = 'TIMES'
                valid.push('font_size' + id)
                this.menuForm.chartForm['font_size' + id] = 11
                valid.push('font_weight' + id)
                this.menuForm.chartForm['font_weight' + id] = 0
                valid.push('font_italic' + id)
                this.menuForm.chartForm['font_italic' + id] = 0
                valid.push('font_color' + id)
                this.menuForm.chartForm['font_color' + id] = '#000000'
                localStorage.setItem('valid', JSON.stringify(valid))
            } else if (type === 'Xaxis') {
                let valid = JSON.parse(localStorage.getItem('valid') || "[]")
                this.menuForm.legendConfig.push({
                    id,
                    config: [
                        {
                            id: id + 1,
                            type: 'text',
                            title: '标题样式'
                        },
                        {
                            id: id + 2,
                            code: 'xtitle' + id,
                            type: 'defaultTitle',
                            title: '标题'
                        },
                        {
                            id: id + 3,
                            code: 'xtitle_font' + id,
                            code2: 'xtitle_size' + id,
                            code3: 'xtitle_weight' + id,
                            code4: 'xtitle_italic' + id,
                            type: 'defaultSize',
                            title: '字体',
                            default: 'ARIAL',
                            default2: 11,
                            default3: 0,
                            default4: 0,
                        },
                        {
                            id: id + 4,
                            code: 'xtitle_color' + id,
                            type: 'defaultColor',
                            title: '颜色',
                            default: '#000000',
                        },
                        {
                            id: id + 5,
                            type: 'text',
                            title: '标签样式'
                        },
                        {
                            id: id + 6,
                            code: 'xfont' + id,
                            code2: 'xfont_size' + id,
                            code3: 'xfont_weight' + id,
                            code4: 'xfont_italic' + id,
                            type: 'defaultSize',
                            title: '字体',
                            default: 'ARIAL',
                            default2: 11,
                            default3: 0,
                            default4: 0,
                        },
                        {
                            id: id + 7,
                            title: '旋转角度',
                            type: 'defaultAngle',
                            code: 'xfont_angle' + id,
                            data: [
                                { label: 0, value: 0 },
                                { label: 30, value: 30 },
                                { label: 45, value: 45 },
                                { label: 60, value: 60 },
                                { label: 90, value: 90 },
                            ],
                            default: 0,
                        },
                        {
                            id: id + 8,
                            code: 'xfont_color' + id,
                            type: 'defaultColor',
                            title: '颜色',
                            default: '#000000',
                        },
                    ],
                    ...this.componentInfo
                })
                valid.push('xtitle' + id)
                this.menuForm.chartForm['xtitle' + id] = ''
                valid.push('xtitle_font' + id)
                this.menuForm.chartForm['xtitle_font' + id] = 'ARIAL'
                valid.push('xtitle_size' + id)
                this.menuForm.chartForm['xtitle_size' + id] = 11
                valid.push('xtitle_weight' + id)
                this.menuForm.chartForm['xtitle_weight' + id] = 0
                valid.push('xtitle_italic' + id)
                this.menuForm.chartForm['xtitle_italic' + id] = 0
                valid.push('xtitle_color' + id)
                this.menuForm.chartForm['xtitle_color' + id] = '#000000'
                valid.push('xfont' + id)
                this.menuForm.chartForm['xfont' + id] = 'ARIAL'
                valid.push('xfont_size' + id)
                this.menuForm.chartForm['xfont_size' + id] = 11
                valid.push('xfont_weight' + id)
                this.menuForm.chartForm['xfont_weight' + id] = 0
                valid.push('xfont_italic' + id)
                this.menuForm.chartForm['xfont_italic' + id] = 0
                valid.push('xfont_angle' + id)
                this.menuForm.chartForm['xfont_angle' + id] = 0
                valid.push('xfont_color' + id)
                this.menuForm.chartForm['xfont_color' + id] = '#000000'
                localStorage.setItem('valid', JSON.stringify(valid))
            } else if (type === 'Yaxis') {
                let valid = JSON.parse(localStorage.getItem('valid') || "[]")
                this.menuForm.legendConfig.push({
                    id,
                    config: [
                        {
                            id: id + 1,
                            type: 'text',
                            title: '标题样式'
                        },
                        {
                            id: id + 2,
                            code: 'ytitle' + id,
                            type: 'defaultTitle',
                            title: '标题'
                        },
                        {
                            id: id + 3,
                            code: 'ytitle_font' + id,
                            code2: 'ytitle_size' + id,
                            code3: 'ytitle_weight' + id,
                            code4: 'ytitle_italic' + id,
                            type: 'defaultSize',
                            title: '字体',
                            default: 'ARIAL',
                            default2: 11,
                            default3: 1,
                            default4: 0,
                        },
                        {
                            id: id + 4,
                            code: 'ytitle_color' + id,
                            type: 'defaultColor',
                            title: '颜色',
                            default: '#000000',
                        },
                        {
                            id: id + 5,
                            type: 'text',
                            title: '标签样式'
                        },
                        {
                            id: id + 6,
                            code: 'yfont' + id,
                            code2: 'yfont_size' + id,
                            code3: 'yfont_weight' + id,
                            code4: 'yfont_italic' + id,
                            type: 'defaultSize',
                            title: '字体',
                            default: 'ARIAL',
                            default2: 11,
                            default3: 1,
                            default4: 0,
                        },
                        {
                            id: id + 7,
                            code: 'yfont_color' + id,
                            type: 'defaultColor',
                            title: '颜色',
                            default: '#000000',
                        },
                    ],
                    ...this.componentInfo
                })
                valid.push('ytitle' + id)
                this.menuForm.chartForm['ytitle' + id] = ''
                valid.push('ytitle_font' + id)
                this.menuForm.chartForm['ytitle_font' + id] = 'ARIAL'
                valid.push('ytitle_size' + id)
                this.menuForm.chartForm['ytitle_size' + id] = 11
                valid.push('ytitle_weight' + id)
                this.menuForm.chartForm['ytitle_weight' + id] = 0
                valid.push('ytitle_italic' + id)
                this.menuForm.chartForm['ytitle_italic' + id] = 0
                valid.push('ytitle_color' + id)
                this.menuForm.chartForm['ytitle_color' + id] = '#000000'
                valid.push('yfont' + id)
                this.menuForm.chartForm['yfont' + id] = 'ARIAL'
                valid.push('yfont_size' + id)
                this.menuForm.chartForm['yfont_size' + id] = 11
                valid.push('yfont_weight' + id)
                this.menuForm.chartForm['yfont_weight' + id] = 0
                valid.push('yfont_italic' + id)
                this.menuForm.chartForm['yfont_italic' + id] = 0
                valid.push('yfont_color' + id)
                this.menuForm.chartForm['yfont_color' + id] = '#000000'
                localStorage.setItem('valid', JSON.stringify(valid))
            } else if (type === 'legend') {
                let valid = JSON.parse(localStorage.getItem('valid') || "[]")
                this.menuForm.legendConfig.push({
                    id,
                    config: [
                        {
                            id: id + 1,
                            code: 'legend_font' + id,
                            code2: 'legend_size' + id,
                            code3: 'legend_weight' + id,
                            code4: 'legend_italic' + id,
                            type: 'defaultSize',
                            title: '字体',
                            default: 'ARIAL',
                            default2: 11,
                            default3: 1,
                            default4: 0,
                        },
                        {
                            id: id + 2,
                            code: 'legend_color' + id,
                            type: 'defaultColor',
                            title: '颜色',
                            default: '#000000',
                        }
                    ],
                    ...this.componentInfo
                })
                valid.push('legend_font' + id)
                this.menuForm.chartForm['legend_font' + id] = 'ARIAL'
                valid.push('legend_size' + id)
                this.menuForm.chartForm['legend_size' + id] = 11
                valid.push('legend_weight' + id)
                this.menuForm.chartForm['legend_weight' + id] = 0
                valid.push('legend_italic' + id)
                this.menuForm.chartForm['legend_italic' + id] = 0
                valid.push('legend_color' + id)
                this.menuForm.chartForm['legend_color' + id] = '#000000'
                localStorage.setItem('valid', JSON.stringify(valid))
            }
            this.collapseName = id
            this.componentCancel()
        },
        //根据组件类型编辑内容
        editOfCollapse(type, id) {
            const index = this.menuForm.legendConfig.findIndex(i => i.id === id)
            this.menuForm.legendConfig.splice(index, 1, { id, ...this.componentInfo })
            this.componentCancel()
        },
        //添加组件
        addOfComInfo(config, type) {
            const list = ['file', 'Xgroup', 'Ygroup']
            let form = this.activeName === 'chart' ? this.menuForm.chartForm : this.menuForm.analysisForm
            let id = new Date().getTime()
            let valid = JSON.parse(localStorage.getItem('valid') || "[]")
            if (valid.includes(this.componentInfo.code)) return this.$message.error('code重复！')
            if (valid.includes(this.componentInfo.code2)) return this.$message.error('code重复！')
            if (valid.includes(this.componentInfo.code3)) return this.$message.error('code重复！')
            if (valid.includes(this.componentInfo.code4)) return this.$message.error('code重复！')
            if (type === 'defaultRadio') {
                this.componentInfo.data = [{ label: '是', value: '1' }, { label: '否', value: '0' }]
            } else if (type === 'defaultAngle') {
                this.componentInfo.data = [
                    { label: 0, value: 0 },
                    { label: 30, value: 30 },
                    { label: 45, value: 45 },
                    { label: 60, value: 60 },
                    { label: 90, value: 90 },
                ]
            } else if (type === 'radio') {
                this.componentInfo.data = this.dataInfo('radio', this.componentInfo.label, this.componentInfo.value)
            } else if (type === 'check') {
                this.componentInfo.data = this.dataInfo('radio', this.componentInfo.label, this.componentInfo.value)
                this.componentInfo.default = this.defalutConvert('check', this.componentInfo.default)
            } else if (type === 'slider') {
                this.componentInfo.max = this.maxAndMin('max', this.componentInfo.radius)
                this.componentInfo.min = this.maxAndMin('min', this.componentInfo.radius)
            } else if (type === 'defaultSelect') {
                this.componentInfo.data = this.dataInfo('defaultSelect', this.componentInfo.label)
            } else if (type === 'select') {
                this.componentInfo.data = this.dataInfo('select', this.componentInfo.label, this.componentInfo.value)
            } else if (type === 'mutualExclusion') {
                form[this.componentInfo.code + type + '#'] = []
            } else if (type === 'colorMultiple') {
                form[this.componentInfo.code + 'colorList#'] = []
            } else if (type === 'Xgroup' || type === 'Ygroup') {
                form[this.componentInfo.code + type + '#'] = {
                    type: this.groupStatus(this.componentInfo.default),
                    group: { dataGroupList: [], sampleList: [] },
                    sample: [],
                }
            } else if (type === 'circleItem') {
                form[this.componentInfo.code + 'circleItemList#'] = {
                    defaultList: [
                        {
                            id: 'genome',
                            text: 'genome',
                            file: '',
                            color: 'Science'
                        }
                    ],
                    fileList: [
                        {
                            id: 'default',
                            text: '',
                            file: '',
                            color: '#3a4892',
                            hotColor1: '#5d04f7',
                            hotColor2: '#fb0212',
                            type: 'line',
                            slider: 1,
                            check: false
                        }
                    ]
                }
            } else if (type === 'file') {
                form[this.componentInfo.code + 'FileId#'] = ''
                form[this.componentInfo.code + 'FileName#'] = ''
            }
            config.push({ id, ...this.componentInfo })
            if (this.componentInfo.code) {
                valid.push(this.componentInfo.code)
                if (!list.includes(type)) form[this.componentInfo.code] = this.typeValid(this.componentInfo, this.componentInfo.default)
            }
            if (this.componentInfo.code2) {
                valid.push(this.componentInfo.code2)
                form[this.componentInfo.code2] = this.typeValid(this.componentInfo, this.componentInfo.default2)
            }
            if (this.componentInfo.code3) {
                valid.push(this.componentInfo.code3)
                form[this.componentInfo.code3] = this.typeValid(this.componentInfo, this.componentInfo.default3)
            }
            if (this.componentInfo.code4) {
                valid.push(this.componentInfo.code4)
                form[this.componentInfo.code4] = this.typeValid(this.componentInfo, this.componentInfo.default4)
            }
            localStorage.setItem('valid', JSON.stringify(valid))
            this.componentCancel()
            console.log(form, '编辑的form!',this.menuForm);
        },
        groupStatus(value) {
            if (value.length === 2) {
                return 1
            } else if (value.length === 1 && value.includes('1')) {
                return 1
            } else if (value.length === 1 && value.includes('0')) {
                return 0
            } else {
                return null
            }
        },
        //根据类型添加默认值
        typeValid(item, value) {
            if (item.type === 'abundance') {
                return Number(value || '')
            } else if (item.type === 'doubleColor') {
                return (value ? value : '#000000') + ',' + (item.default2 ? item.default2 : '#000000')
            } else if (item.type === 'switch') {
                return Boolean(Number(value))
            } else if (item.type === 'slider') {
                return Number(value)
            } else if (item.type === 'color' || item.type === 'defaultColor') {
                return value || '#000000'
            } else {
                return value
            }
        },
        defalutConvert(type, value) {
            let a
            if (type === 'check') {
                a = value.split(",").reduce((acc, cur) => {
                    const arr = cur.split("，");
                    acc.push(...arr)
                    return acc;
                }, []);
            }
            return a
        },
        dataInfo(type, label = '', value = '') {
            let arr1 = label.split(",").reduce((acc, cur) => {
                const arr = cur.split("，");
                acc.push(...arr)
                return acc;
            }, []);
            let arr2 = value.split(",").reduce((acc, cur) => {
                const arr = cur.split("，");
                acc.push(...arr)
                return acc;
            }, []);
            let arr = []
            const list = ['radio', 'check', 'select']
            if (type == 'defaultSelect') {
                let min = Number(arr1[0])
                let max = Number(arr1[1])
                let step = Number(arr1[2])
                for (let i = min; i <= max; i += step) {
                    arr.push({
                        label: NP.strip(i),
                        value: `${NP.strip(i)}`
                    })
                }
            } else if (list.includes(type)) {
                for (let i = 0; i < arr1.length; i++) {
                    arr.push({
                        label: arr1[i],
                        value: `${arr2[i]}`,
                    })
                }
            }
            return arr
        },
        //滑动组件最大值最小值计算
        maxAndMin(type, radius) {
            let arr = radius.split(",").reduce((acc, cur) => {
                const arr = cur.split("，");
                acc.push(...arr)
                return acc;
            }, []);
            if (type == 'max') {
                return arr[1]
            } else {
                return arr[0]
            }
        },
        //编辑组件
        editOfComInfo(config, id, type) {
            const list = ['file', 'Xgroup', 'Ygroup']
            let form = this.activeName === 'chart' ? this.menuForm.chartForm : this.menuForm.analysisForm
            let valid = JSON.parse(localStorage.getItem('valid') || "[]")
            let code = config.find(i => i.id === id).code
            let code2 = config.find(i => i.id === id).code2
            let code3 = config.find(i => i.id === id).code3
            let code4 = config.find(i => i.id === id).code4
            if (valid.includes(this.componentInfo.code) && this.componentInfo.code !== code) return this.$message.error('code重复！')
            if (valid.includes(this.componentInfo.code2) && this.componentInfo.code2 !== code2) return this.$message.error('code重复！')
            if (valid.includes(this.componentInfo.code3) && this.componentInfo.code3 !== code3) return this.$message.error('code重复！')
            if (valid.includes(this.componentInfo.code4) && this.componentInfo.code4 !== code4) return this.$message.error('code重复！')

            const index = config.findIndex(i => i.id === id)

            if (type === 'Xgroup' || type === 'Ygroup') {
                this.componentInfo.data = {
                    type: this.groupStatus(this.componentInfo.default),
                    group: { dataGroupList: [], sampleList: [] },
                    sample: [],
                }
            } else if (type === 'radio') {
                this.componentInfo.data = this.dataInfo('radio', this.componentInfo.label, this.componentInfo.value)
            } else if (type === 'check') {
                this.componentInfo.data = this.dataInfo('radio', this.componentInfo.label, this.componentInfo.value)
                this.componentInfo.default = this.defalutConvert('check', this.componentInfo.default)
            } else if (type === 'slider') {
                this.componentInfo.max = this.maxAndMin('max', this.componentInfo.radius)
                this.componentInfo.min = this.maxAndMin('min', this.componentInfo.radius)
            } else if (type === 'defaultSelect') {
                this.componentInfo.data = this.dataInfo('defaultSelect', this.componentInfo.label)
            } else if (type === 'select') {
                this.componentInfo.data = this.dataInfo('select', this.componentInfo.label, this.componentInfo.value)
            }
            config.splice(index, 1, { id, ...this.componentInfo })
            const y = valid.findIndex(i => i === code)
            const y2 = valid.findIndex(i => i === code2)
            const y3 = valid.findIndex(i => i === code3)
            const y4 = valid.findIndex(i => i === code4)
            delete form[code]
            valid.splice(y, 1, this.componentInfo.code)
            if (!list.includes(type)) form[this.componentInfo.code] = this.typeValid(this.componentInfo, this.componentInfo.default)
            if (y2 !== -1) {
                valid.splice(y2, 1, this.componentInfo.code2)
                delete form[code2]
                form[this.componentInfo.code2] = this.typeValid(this.componentInfo, this.componentInfo.default2)
            }
            if (y3 !== -1) {
                valid.splice(y3, 1, this.componentInfo.code3)
                delete form[code3]
                form[this.componentInfo.code3] = this.typeValid(this.componentInfo, this.componentInfo.default3)
            }
            if (y4 !== -1) {
                valid.splice(y4, 1, this.componentInfo.code4)
                delete form[code4]
                form[this.componentInfo.code4] = this.typeValid(this.componentInfo, this.componentInfo.default4)
            }
            localStorage.setItem('valid', JSON.stringify(valid))
            this.componentCancel()
        },
    }
}